<template>
  <page-meta :page-style="'overflow:'+(show?'hidden':'visible')"></page-meta>
  <view style="background-color: rgb(246,248,251);overflow: hidden;">
    <view class="tip">视频结果保存7天，请妥善保存</view>
    <view class="divide">
      <view @click="clickTab(0)" :class="tab==0?'tab-active':''" class="tab">全部 <text style="font-size: 24rpx;">({{all}})</text></view>
      <view @click="clickTab(1)" :class="tab==1?'tab-active':''" class="tab">已发布 <text style="font-size: 24rpx;">({{whetherWhether1}})</text></view>
      <view @click="clickTab(2)" :class="tab==2?'tab-active':''" class="tab">未发布 <text style="font-size: 24rpx;">({{whetherWhether2}})</text></view>
    </view>
  <!-- <view class="data">
    <view v-if="stay" class="crafting">
      已合成
      <view style="font-size: 48rpx; font-weight: 500; margin-top: 18rpx">{{
        videoArr.length
      }}</view>
      <image style="width: 120rpx;height: 120rpx;position: absolute;bottom: 0;right: 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_scsliang.png" mode="" />
    </view>
    <view v-else class="crafting">
      已发布
      <view style="font-size: 48rpx; font-weight: 500; margin-top: 18rpx">{{
        whetherWhether1
      }}</view>
      <image style="width: 120rpx;height: 120rpx;position: absolute;bottom: 0;right: 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_scsliang.png" mode="" />
    </view>
    <view v-if="stay" class="becraft">
      待合成
      <view style="font-size: 48rpx; font-weight: 500; margin-top: 18rpx">{{
        stay != -1 ? stay : max
      }}</view>
      <image style="width: 120rpx;height: 120rpx;position: absolute;bottom: 0;right: 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wcsliang.png" mode="" />
    </view>
    <view v-else class="becraft">
      待发布
      <view style="font-size: 48rpx; font-weight: 500; margin-top: 18rpx">{{
        whetherWhether2
      }}</view>
      <image style="width: 120rpx;height: 120rpx;position: absolute;bottom: 0;right: 0;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_wcsliang.png" mode="" />
    </view>
  </view> -->
  <view class="content">
    <!-- <view class="text"
      ><image
        style="width: 48rpx; height: 48rpx"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/icon_sming.png"
        mode=""
      />视频结果保存7天，请妥善保存
    </view> -->
    <view style="padding-bottom: 200rpx; border-radius: 32rpx 32rpx 0 0">
      <image
        class="video"
        @click="openPopup(index)"
        v-for="(item, index) in videoArr"
        :key="index"
        :src="item.image||(imageList.length?imageList[0].image:false)||imgUrl"
      >
      <view v-if="item.whetherWhether==1" class="pushs">已发布</view>
      </image>
      <view v-if="stay>0" class="video">
        <image style="width: 100%;height: 100%;" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/img_shengcehng.png" mode="" />
        <image class="rotate" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/spylan_icon_sxin.png"/>
        <image class="triangle" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/spylan_icon_sxinsjiao.png"/>
      </view>
    </view>
  </view>
  <view class="fixed">
    <button @click="stop" class="stop" v-if="stay>0">停止任务</button>
    <button @click="delTask" class="stop" v-else>删除任务</button>
    <button class="publish" @click="publish()">发布视频</button>
  </view>
</view>
  <uni-popup ref="popup" :safe-area="false" @change="popupChange">
    <view class="popup-content">
      <view class="top">
        <text>预览爆款视频</text>
        <image @click="closePopup" style="width: 48rpx; height: 48rpx" src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/list_button_Close.png" mode="" />
      </view>
      <video custom-cache="true" class="preview" v-if="isPopup" :src="videoArr[i].videoUrl" @error="videoErr"></video>
      <view class="twobtn">
        <text class="advanced" @click="delVideo()">删除</text>
        <button class="quxiao1" @click="saveVideo(videoArr[i].videoUrl)">保存视频</button>
        <button class="queren" @click="publish(videoArr[i].videoId)">发布视频</button>
      </view>
    </view>
  </uni-popup>
  <uni-popup ref="code" @change="code">
    <view class="erweima">
      <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 28rpx;">
        <view class="name">{{ questName }}</view>
        <view class="count">视频</view>
      </view>
      <image
        class="bgi"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png"
        mode=""
      />
      <image
        class="close"
        @click="popupClose()"
        src="https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/button_hygbi.png"
        mode=""
      />
      <view class="center">
        <image
          v-if="src"
          :src="src"
          @click="toggleImg"
          style="width: 550rpx; height: 550rpx; margin-bottom: 14rpx"
        />
        <text>扫描二维码就可以发布视频</text>
      </view>
    </view>
    <btn-module @customClick="saveImg()" v-if="isNull" message="下载二维码" />
    <two-button v-else @leftClick="change()" @rightClick="saveImg()" left="已发布换一个" :num="whetherWhether2-1" right="下载二维码" />
  </uni-popup>
  <canvas
    style="width: 550rpx; height: 550rpx; margin: 0 auto; top: -99999px"
    id="canvas"
    canvas-id="myQrcode"
  ></canvas>
</template>

<script>
import { httpRequest } from "../../utils/http";
import btnModule from "../../components/index/btnModule.vue";
import twoButton from "../../components/index/twoButton.vue";
export default {
  components: {
    btnModule: btnModule,
    twoButton:twoButton
  },
  name: "UniPresetVueVite1Preview",

  data() {
    return {
      number: 1,
      max: 0,
      videoArr: uni.getStorageSync("todoVideo"),
      count: 2,
      index: uni.getStorageSync("index"),
      title: "",
      label: "",
      copy: "",
      flag: false,
      i: -1,
      isPopup: false,
      src: "",
      width: 0,
      height: 0,
      url: "",
      videoId: "",
      stay: -1,
      randomTitle: "",
      whetherWhether1: "",
      whetherWhether2: "",
      videoId1:'',
      isNull:false,
      maxNum:-1,
      questName:'',
      whetherWhetherNum:0,
      timeId:null,
      imageList:[],
      imgUrl:'',
      show:false,
      master:'',
      tab:0,
      all:0
    };
  },
  videoErr(err){
    uni.showToast({
      title: '视频加载失败',
      icon: 'error'
    })
    console.log(err);
  },
  async onPullDownRefresh(){
      this.getVideoList()
      const res1 = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
      })
      console.log(res1);
      if(!res1.data){
        clearInterval(this.timeId)
        this.stay=0
      }
  },
  async onLoad(e) {
    if(e.master){
      this.master = e.master
    }
    const res1 = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
      })
      console.log(res1);
      if(!res1.data){
        clearInterval(this.timeId)
        this.stay=0
      }
    this.timeId = setInterval(async() => {
      const res = await httpRequest("/api/videoListByTaskId", "POST", {
        taskId: this.videoId,
      });
      console.log(res);
  //     res.data.videoList.forEach(e=>{
  //       if (!this.videoArr.includes(e)) {
  //       // 将不在 this.videoArr 数组中的元素添加到末尾
  //       this.videoArr.push(e);
  // }
  //     })
      
      this.videoArr = res.data.videoList;
      console.log(this.videoArr);
      const whetherWhether1 = this.videoArr.filter(e=>e.whetherWhether=='1')
      const whetherWhether2 = this.videoArr.filter(e=>e.whetherWhether=='2')
      this.whetherWhether1 = whetherWhether1.length;
      this.whetherWhether2 = whetherWhether2.length;
      if (this.maxNum!=-1) {
        if(this.stay!=0){
          this.stay = this.maxNum - this.videoArr.length;
        console.log('获取'+this.stay);
        }
      }
      uni.stopPullDownRefresh()
      const res1 = await httpRequest("/api/findTaskStart", "POST", {
      businessId: uni.getStorageSync("business").businessId,
      })
      console.log(res1);
      if(!res1.data){
        clearInterval(this.timeId)
        this.stay=0
      }
      
    if(!this.stay){
      clearInterval(this.timeId)
    }
    console.log('stay',this.stay);
    }, 5000);
    //获取最大值
    this.max = e.max - 1;
    //从视频库里跳转
    if (e.video) {
      this.videoId = e.video;
      this.getVideoList(e);
      this.maxNum = e.unsynthesized
    }
    if(e.unsynthesized){
      this.maxNum = e.unsynthesized
    }
    if(e.name){
      this.questName = e.name
    }
    if (e.title) {
      this.randomTitle = e.title;
    }
    if (e.push1) {
      this.whetherWhether1 = e.push1;
      this.whetherWhether2 = e.push2;
    }
    console.log(this.stay);
  },
  onShow() {
    if (this.videoId) {
      this.getVideoList();
    }
  },

  methods: {
    async delTask(){
      uni.showModal({
        title: '提示',
        content: '确认要删除该任务吗?',
        success: async (res) => {
          if(res.confirm){
            uni.showLoading({
              title: '正在删除',
              mask: false
            })
            await httpRequest('/api/delTask','POST',{
                taskId:this.videoId
            })
            const res1 = await httpRequest("/api/findTaskStart", "POST", {
              businessId: uni.getStorageSync("business").businessId,
            })
      if(!res1.data||res1.data.start!=3){
        await httpRequest('/api/delStaging','POST',{
        businessId: uni.getStorageSync("business").businessId,
        taskId:this.videoId
      })
      uni.removeStorageSync('product')
      uni.removeStorageSync('videoArr')
      uni.removeStorageSync('copy')
      uni.removeStorageSync('v1')
      uni.removeStorageSync('v2')
      uni.removeStorageSync('v3')
      uni.removeStorageSync('v4')
      uni.removeStorageSync('v5')
      uni.removeStorageSync('v6')
      uni.removeStorageSync('v7')
      uni.removeStorageSync('maxNum')
      }
      uni.hideLoading()
      uni.showToast({title:'删除成功',icon:'none'})
      uni.redirectTo({ url: `/pageA/index/videos?shopId=${uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId}&index=${uni.getStorageSync('index')}` })
          }
        },
      })
    
    },
    async stop(){
      uni.showModal({
        title: '提示',
        content: '确定要停止生成吗',
        success: async(res) => {
          if(res.confirm){
            uni.showLoading({
              title: '正在停止',
              mask: true
            })
            await httpRequest('/api/delStaging','POST',{
              businessId: uni.getStorageSync("business").businessId,
              taskId:this.videoId
            })
            uni.hideLoading()
            uni.redirectTo({ url: `/pageA/index/videos?shopId=${uni.getStorageSync('shop')[uni.getStorageSync('index')].shopId}&index=${uni.getStorageSync('index')}` })
            uni.removeStorageSync('product')
            uni.removeStorageSync('videoArr')
            uni.removeStorageSync('copy')
            uni.removeStorageSync('v1')
            uni.removeStorageSync('v2')
            uni.removeStorageSync('v3')
            uni.removeStorageSync('v4')
            uni.removeStorageSync('v5')
            uni.removeStorageSync('v6')
            uni.removeStorageSync('v7')
            uni.removeStorageSync('maxNum')
          
          }
        }
      })
    },
    clickTab(e){
      this.tab = e
      this.getVideoList()
      // setTimeout(() => {
      //   if(e==1){
      //   this.videoArr = this.videoArr.filter(e=>e.whetherWhether=='1')
      //   }else if(e==2){
      //     this.videoArr = this.videoArr.filter(e=>e.whetherWhether=='2')
      //   }
      // }, 300);
      console.log('video');
      console.log(this.videoArr);
    },
    popupChange(e){
      this.show = e.show
    },
    //获取暂无封面时的横竖屏默认封面
    getInformation(){
      let str = this.videoArr[0].videoUrl
      const filename = str.substring(str.lastIndexOf("/") + 1); // 获取文件名部分
      console.log(filename);
      const fileStr = filename.split('.')
      const lastChar = fileStr[0].charAt(fileStr[0].length - 1); // 获取最后一个字符
      console.log(lastChar);
      if(lastChar == 'H') this.imgUrl = 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kztai_img_sban.png'
      if(lastChar == 'W') this.imgUrl = 'https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/kztai_img_hban.png'
    },
    waiting(){
      uni.showToast({title:'视频加载中,请稍后',icon:'none'})
    },
    closePopup(){
      this.$refs.popup.close()
    },
    async getNewVideo(){
      const res = await httpRequest('/api/taskStart2Videos','POST',{
        businessId: uni.getStorageSync("business").businessId,
      })
      console.log(res);
      if(!res.data)return uni.stopPullDownRefresh()
      const data = res.data.map(e => {
        return JSON.parse(e)
      });
    console.log(data);
      this.videoArr = [...data,...this.videoArr]
      console.log(this.videoArr);
    this.stay = this.maxNum - this.videoArr.length;
      uni.stopPullDownRefresh()
    },
    //根据任务ID获取任务里的视频
    async getVideoList(e) {
      uni.showLoading({
        title: '加载中',
        mask: false
      })
      const res = await httpRequest("/api/videoListByTaskId", "POST", {
        taskId: this.videoId,
      });
      console.log(res);
        this.videoArr = res.data.videoList
      if(this.videoArr.length){
        this.imageList = this.videoArr.filter(e=>e.image!=null)
        this.getInformation()
      }
      const whetherWhether1 = this.videoArr.filter(e=>e.whetherWhether=='1')
      const whetherWhether2 = this.videoArr.filter(e=>e.whetherWhether=='2')
      this.whetherWhether1 = whetherWhether1.length;
      this.whetherWhether2 = whetherWhether2.length;
      this.all = this.videoArr.length;
      if(this.tab==1){
        this.videoArr = whetherWhether1
      }else if(this.tab==2){
        this.videoArr = whetherWhether2
      }
      console.log(this.maxNum);
      if (this.maxNum!=-1) {
        if(this.stay!=0){
          this.stay = this.maxNum - this.videoArr.length;
        console.log('获取'+this.stay);
        }
      }
      uni.hideLoading()
      uni.stopPullDownRefresh()
    },
    //关闭弹窗
    popupClose() {
      console.log("关闭");
      this.$refs.code.close();
    },
    //点击切换到下一个视频的二维码
    toggleImg() {
      console.log("点击切换");
    },
    //保存图片函数
    saveImg() {
      //下载图片
      console.log(this.src);
      uni.downloadFile({
        url: this.src,
        success: (res) => {
          if (res.statusCode === 200) {
            //保存图片到系统相册
            uni.saveImageToPhotosAlbum({
              filePath: res.tempFilePath,
              success: function (res) {
                console.log(res);
                uni.showToast({
                  title: "保存二维码成功",
                  icon: "none",
                });
              },
              fail: function (err) {
                console.log(err);
                uni.showToast({
                  title: "保存二维码失败",
                  icon: "none",
                });
              },
            });
          } else {
            console.log(res);
            uni.showToast({
              title: "下载失败",
              icon: "none",
            });
          }
        },
        fail: (fail) => {
          console.log(fail);
          uni.showToast({
            title: "下载失败",
            icon: "none",
          });
        },
      });
    },

    //打开弹窗
    openPopup(i) {
      uni.navigateTo({ url: `/pageA/index/videoPreview?item=${JSON.stringify(this.videoArr[i])}` })
      // this.i = i;
      // this.isPopup = true;
      // this.$refs.popup.open("bottom");
    },
    //确认 跳转到生成视频页面
    // async queren() {
    //   if (!this.videoArr.length)
    //     return uni.showToast({ title: "暂时没有视频哦~", icon: "none" });
    //   uni.setStorageSync("todoVideo", this.videoArr);
    //   uni.removeStorageSync("copy");
    //   uni.removeStorageSync("title");
    //   uni.removeStorageSync("label");
    //   uni.removeStorageSync("poi");
    //   uni.removeStorageSync("videoArr1");
    //   uni.removeStorageSync("videoArr2");
    //   uni.removeStorageSync("videoArr3");
    //   uni.removeStorageSync("music");
    //   uni.removeStorageSync("active");
    //   await httpRequest("/api/delStaging", "POST", {
    //     businessId: uni.getStorageSync("business").businessId,
    //   });
    //   uni.navigateTo({ url: "/pageA/index/publish" });
    // },
    //生成随机数函数
    randomIndex(array) {
      return Math.floor(Math.random() * array.length);
    },
    //继续生成
    async appointment() {
      console.log(this.count);
      console.log(this.max);
      if (this.max <= 0) {
        uni.showToast({ title: "超过最大视频数量", icon: "error" });
        return;
      }
      this.flag = true;
      try {
        let randomColor = uni.getStorageSync("color")[
          this.randomIndex(uni.getStorageSync("color"))
        ];
        this.title =
          uni.getStorageSync("title")[this.randomIndex(uni.getStorageSync("title"))]
            .titleName || this.randomTitle;
        this.label = uni.getStorageSync("label");
        let data = {
          shopId: uni.getStorageSync("shop")[this.index].shopId,
          videoNum: 1,
          start: 1,
          copyShowType: 1,
          title: this.title,
          label: this.label,
          fondColor: randomColor.color,
          fondStrokeColor: randomColor.stroke,
          taskId: uni.getStorageSync("vid"),
        };
        console.log(uni.getStorageSync("broadCast"));
        if (!uni.getStorageSync("broadCast")) {
          this.copy = uni.getStorageSync("copy");
          data = {
            ...data,
            copywriting: this.copy[this.randomIndex(this.copy)].content,
          };
          console.log(data);
        }
        if (uni.getStorageSync("poi") === 0) {
          data = { ...data, poiId: uni.getStorageSync("shop")[this.index].poiId };
          const res3 = await httpRequest(
            "/api/synthesisVideoAndCopAndMus1",
            "POST",
            data
          );
          console.log(res3);
          if (res3.success) {
            uni.showToast({ title: "生成成功", icon: "success" });
            await httpRequest("/api/shopKaJianUseNum", "POST", {
              shopId: uni.getStorageSync("shop")[this.index].shopId,
              num: 1,
            });
            this.count++;
            this.max--;
            this.flag = false;
            this.videoArr = [...this.videoArr, res3.data.video0];
            this.$refs.popup.close();
          } else {
            uni.showToast({ title: "生成失败", icon: "error" });
            this.flag = false;
          }
        } else {
          const res3 = await httpRequest(
            "/api/synthesisVideoAndCopAndMus1",
            "POST",
            data
          );
          console.log(res3);
          if (res3.success) {
            uni.showToast({ title: "生成成功", icon: "success" });
            await httpRequest("/api/shopKaJianUseNum", "POST", {
              shopId: uni.getStorageSync("shop")[this.index].shopId,
              num: 1,
            });
            this.count++;
            this.max--;
            this.flag = false;
            this.videoArr = [...this.videoArr, res3.data.video0];
            this.$refs.popup.close();
          } else {
            uni.showToast({ title: "生成失败", icon: "error" });
            this.flag = false;
          }
        }
      } catch (error) {
        this.flag = false;
        uni.showToast({
          title: "生成超时",
          icon: "none",
        });
        console.log(error);
      }
    },
    //取消
    quxiao() {
      this.$refs.popup.close();
    },
    async change(){
      const res = await httpRequest('/api/videoWhetherWhether','POST',{
        taskId:this.videoId,
        videoId:this.videoId1
      })
      console.log(res);
      if(res.data==null){
        uni.showToast({title:'没有更多视频了',icon:'none'})
        this.isNull = true
        return
      }
      this.videoId1 = res.data.videoId
      this.publish(this.videoId1)
      this.getVideoList()
    },
    //生成二维码
    // async publish(id) {
    //   this.$refs.popup.close()
    //   //loading
    //   uni.showLoading({
    //     title: "正在生成二维码",
    //     mask: false,
    //   });
    //   const res = await httpRequest("/api/uploadH5", "POST", { videoId: id });
    //   console.log(res);
    //   const video = res.data.video.videoUrl;
    //   const title = res.data.video.title;
    //   // const hashTags = res.data.video.label.split("#");
    //   const nonce_str = res.data.str;
    //   const timestamp = res.data.time;
    //   const signature = res.data.qian;
    //   // this.url = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&title=${title ? title : ""}`;
    //   this.url = `snssdk1128://openplatform/share?client_key=awib1ol4e2732l27&nonce_str=${nonce_str}&timestamp=${timestamp}&signature=${signature}&share_type=h5&video_path=${video}&share_to_publish=1&title=${
    //     title ? title : ""
    //   }`;

    //   //二维码
    //   // 提取查询参数部分
    //   const queryString = this.url.split("?")[1];
    //   // 分割查询参数字符串为键值对数组
    //   const paramsArray = queryString.split("&");
    //   // 对每个查询参数进行编码
    //   const encodedParamsArray = paramsArray.map((param) => {
    //     const [key, value] = param.split("=");
    //     const encodedValue = encodeURIComponent(value);
    //     return `${key}=${encodedValue}`;
    //   });

    //   // 构造编码后的查询参数字符串
    //   const encodedQueryString = encodedParamsArray.join("&");

    //   // 构造编码后的 URL
    //   const encodedUrl = this.url.split("?")[0] + "?" + encodedQueryString;
    //   console.log(encodedUrl);
    //   uni
    //     .createSelectorQuery()
    //     .select("#canvas")
    //     .boundingClientRect((data) => {
    //       console.log("获取到canvas元素的布局信息：", data);
    //       this.width = data.width;
    //       this.height = data.height;
    //       console.log('url',this.url);
    //       drawQrcode({
    //       width: this.width, // 必须，二维码宽度，与canvas的width保持一致
    //       height: this.height, // 必须，二维码高度，与canvas的height保持一致
    //       canvasId: "myQrcode",
    //       correctLevel:2,
    //       background: "#ffffff", //	非必须，二维码背景颜色，默认值白色
    //       foreground: "#000000", // 非必须，二维码前景色，默认值黑色 	'#000000'
    //       // ctx: wx.createCanvasContext('myQrcode'), // 非必须，绘图上下文，可通过 wx.createCanvasContext('canvasId') 获取，v1.0.0+版本支持
    //       text: encodedUrl, // 必须，二维码内容
    //     });
    //     console.log('画完了');
    //     setTimeout(() => {
    //     uni.canvasToTempFilePath({
    //       canvasId: "myQrcode",
    //       success: async(res) => {
    //         console.log(res.tempFilePath);
            
    //         const {data} =await uni.uploadFile({
		// 		// url: 'https://www.diandianyouke.cn:8081/api/uploadErWeiMa',
		// 		url: 'https://www.diandianyouke.cn:8081/api/uploadErWeiMa',
		// 		filePath: res.tempFilePath,
		// 		name: 'ewm',
		// 		formData: {
		// 			businessId:uni.getStorageSync('business').businessId
		// 		},	
		// 	})
			
		// 	    console.log(JSON.parse(data).data);
		// 			this.src = JSON.parse(data).data
    //       uni.hideLoading();
    //       this.$refs.code.open("center");
    //       },
    //     });
        
    //     this.videoId1 = id
    //   }, 3000);
    //     })
    //     .exec();
    // },
    publish(){
        if(!this.videoArr.length)return uni.showToast({
          title: '暂无视频',
          icon: 'none'
        })
        uni.navigateTo({ url: `/pageA/index/publish?item=${JSON.stringify(this.videoArr[0])}` })
    },
    async code(e){
      uni.showLoading({
        title: '请稍后',
        mask: true
      })
      const res = await httpRequest("/api/videoListByTaskId", "POST", {
        taskId: this.videoId,
      });
      console.log(res);
      this.videoArr = res.data.videoList;
      const whetherWhether1 = this.videoArr.filter(e=>e.whetherWhether=='1')
      const whetherWhether2 = this.videoArr.filter(e=>e.whetherWhether=='2')
      this.whetherWhether1 = whetherWhether1.length;
      this.whetherWhether2 = whetherWhether2.length;
      uni.stopPullDownRefresh()
      uni.hideLoading()
      this.show = e.show
    }
  },
  onUnload() {
    console.log("页面卸载");
    uni.removeStorageSync("copy");
    uni.removeStorageSync("title");
    uni.removeStorageSync("label");
    uni.removeStorageSync("poi");
    uni.removeStorageSync("videoArr1");
    uni.removeStorageSync("videoArr2");
    uni.removeStorageSync("videoArr3");
    uni.removeStorageSync("active");
    uni.removeStorageSync("music");
    uni.removeStorageSync("v1");
    uni.removeStorageSync("v2");
    uni.removeStorageSync("v3");
    uni.removeStorageSync("flag");
  },
};
</script>

<style lang="scss" scoped>
.tip{
  width: 100%;
  height: 48rpx;
  background-color: rgba(252,139,0,0.1);
  text-align: center;
  line-height: 48rpx;
  font-size: 24rpx;
  color: rgb(252,139,0);
}
.divide{
  display: flex;
  justify-content: flex-end;
  margin: 30rpx;
  margin-bottom: 0;
  .tab{
    margin-left: 48rpx;
    font-size: 30rpx;
    font-weight: 500;
    color: rgb(144, 147, 153);
   
  }
}
.data {
  display: flex;
  margin: 30rpx;
  justify-content: space-between;
  .crafting {
  position: relative;
    width: 400rpx;
    height: 184rpx;
    font-size: 28rpx;
    padding: 30rpx;
    box-sizing: border-box;
    border-radius: 16rpx;
    background: linear-gradient(
      135deg,
      rgba(206, 186, 255, 1) 0%,
      rgb(138, 122, 255) 100%
    );
    color: #fff;
  }
  .becraft {
    position: relative;
    width: 272rpx;
    height: 184rpx;
    border-radius: 16rpx;
    padding: 30rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #fff;
    background: linear-gradient(
      135deg,
      rgba(255, 213, 130, 1) 0%,
      rgb(255, 159, 26) 100%
    );
  }
}
.content {
  width: 100%;
  min-height: 850rpx;
  border-radius: 32rpx 32rpx 0 0;
  padding: 30rpx;
  box-sizing: border-box;
  .text {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    width: 690rpx;
    height: 88rpx;
    background-color: rgba(142, 84, 244, 0.1);
    font-size: 24rpx;
    color: rgb(255, 55, 71);
    border-radius: 16rpx;
    padding: 0 30rpx;
    margin-bottom: 30rpx;
  }
}
.fixed{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 166rpx;
  padding-top: 10rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  background-color: #fff;
  .stop{
    width: 240rpx;
    height: 88rpx;
    border: 1px solid rgb(142,84,244);
    color: rgb(142,84,244);
    background-color: #fff;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 8rpx;
    margin: 0;
  }
  .publish{
    width: 432rpx;
    height: 88rpx;
    background-color: rgb(142,84,244);
    color: #fff;
    margin: 0;
    margin-left: 22rpx;
    font-size: 32rpx;
    text-align: center;
    line-height: 88rpx;
    border-radius: 8rpx;
  }
}

.video {
  display: inline-block;
  position: relative;
  width: 336rpx;
  height: 576rpx;
  border-radius: 16rpx;
  &:nth-child(2n) {
    margin-left: 18rpx;
  }
  .rotate{
    width: 96rpx;
    height: 96rpx;
    position: absolute;
    top: 192rpx;
    left: 120rpx;   
    animation: rotate 2.5s linear infinite;
  }
  @keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  .triangle{
    width: 96rpx;
    height: 96rpx;
    position: absolute;
    top: 192rpx;
    left: 120rpx;  
  }
  .pushs{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 72rpx;
    text-align: center;
    line-height: 72rpx;
    font-size: 24rpx;
    color: #fff;
    background-color: rgb(0,0,0,0.7);
  }
}
.bottom {
  position: fixed;
  height: 166rpx;
  box-sizing: border-box;
  padding-top: 10rpx;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: #fff;
  .bottom-quxiao {
    width: 330rpx;
    height: 86rpx;
    text-align: center;
    line-height: 88rpx;
    color: rgba(142, 84, 244, 1);
    border: 1px solid rgba(142, 84, 244, 1);
  }
  .bottom-queren {
    width: 332rpx;
    height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    background-color: rgba(142, 84, 244, 1);
    color: #fff;
    margin-right: 30rpx;
  }
}
.popup-content {
  background-color: #fff;
  border-radius: 32rpx 32rpx 0 0;
  // height: 1120rpx;
  width: 100%;
  .top {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 94rpx;
    width: 100%;
    padding: 0 30rpx;
    font-size: 32rpx;
    font-weight: 700;
    color: rgb(48, 49, 51);
  }
  .preview {
    height: 1120rpx;
    width: 100%;
  }
  .twobtn {
    position: relative;
    // height: 166rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx 68rpx;
    .advanced {
      // margin-top: 34rpx;
      font-size: 28rpx;
      color: rgb(144, 147, 153);
      margin-right: 34rpx;
      // line-height: 88rpx;
    }
    // .del{
    //     position: absolute;
    //     width: 192rpx;
    //     height: 102rpx;
    //     background-color: #fff;
    //     display: flex;
    //     justify-content: center;
    //     align-items: center;
    //     border-radius: 16rpx;
    // }
    .quxiao1 {
      width: 288rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: rgba(142, 84, 244, 1);
      border: 1px solid rgba(142, 84, 244, 1);
      margin-right: 24rpx;
      background-color: #fff;
    }
    .queren {
      width: 288rpx;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: #fff;
      background-color: rgba(142, 84, 244, 1);
    }
  }
}
.erweima {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 630rpx;
  height: 900rpx;
  transform: translate(0px, -18px);
  // background: url('https://www.diandianyouke.site:801/fileDataBase/static/stag/static/img/erWeiMa.png') no-repeat;
  // background-size: contain;
  .name{
    font-size: 36rpx;
    font-weight: 500;
    color: #fff;
    margin-bottom: 12rpx;
  }
  .count{
    font-size: 30rpx;
    color: #fff;
  }
  .bgi {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -999;
  }
  .center {
    display: flex;
    flex-direction: column;
    align-items: center;
    // width: 510rpx;
    // height: 530rpx;
    padding: 30rpx;
    background-color: #fff;
    font-size: 24rpx;
    color: rgb(69, 70, 74);
    text-align: center;
    border-radius: 24rpx;
  }
  .close {
    position: absolute;
    top: -88rpx;
    right: 0;
    width: 88rpx;
    height: 88rpx;
  }
}
.tab-active{
  color: rgb(142,84,244) !important;
}
</style>
